import React, { useEffect, useState } from "react";
import {
    Breadcrumb,
    Card,
    Table,
    Input,
    Row,
    Col,
    Select,
    Button,
    List,
    Tag,
    Modal,
    message,
    Space,
} from "antd";
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
    ExclamationCircleOutlined,
} from "@ant-design/icons";
import { MergeRouteComponentProps } from "../../../../router/types";
import { fetchList, addItem, removeItem } from "../../../../http/student";
import { fetchList as fetchGradeList } from "../../../../http/grade";

interface IProps extends MergeRouteComponentProps {}

const StudentManage: React.FC<IProps> = () => {
    /**
     * 组件状态
     */
    const [list, setList] = useState([]);
    const [gradeList, setGradeList] = useState([]);
    const [addModalVisible, setAddModalVisible] = useState(false);
    const [realname, setRealname] = useState("");
    const [code, setCode] = useState("");
    const [passwrod, setPassword] = useState("");
    const [gid, setGid] = useState("");

    /**
     * 获取学生列表
     */
    const getList = async () => {
        const res = await fetchList();
        setList(res.data.data);
    };

    /**
     * 获取教室列表
     */
    const getGradeList = async () => {
        const res = await fetchGradeList();
        setGradeList(res.data.data);
    };

    /**
     * 生命周期
     */
    useEffect(() => {
        getList();
        getGradeList();
    }, []);

    /**
     * 表格列配置
     */
    const columns = [
        {
            title: "姓名",
            dataIndex: "student_name",
        },
        {
            title: "学号",
            dataIndex: "student_code",
        },
        {
            title: "班级",
            dataIndex: "grade_name",
        },
        {
            title: "教室",
            dataIndex: "room_name",
        },
        {
            title: "密码",
            dataIndex: "student_password",
        },
        {
            title: "操作",
            render: (text: string, record: any) => (
                <Button
                    type="link"
                    danger
                    size="small"
                    onClick={() => onDeleteClicked(record)}
                >
                    删除
                </Button>
            ),
        },
    ];

    /**
     * 添加弹框
     */
    const AddModal = (
        <Modal
            title="添加班级"
            okText="确定"
            cancelText="取消"
            visible={addModalVisible}
            onOk={async () => {
                // 添加
                const res = await addItem(realname, code, passwrod, gid);
                // 如果不成功，提示用户
                if (res.data.code !== 201) {
                    message.error(res.data.message);
                    return;
                }
                // 如果成功，刷新列表，关闭弹框
                getList();
                setAddModalVisible(false);
            }}
            onCancel={() => {
                setAddModalVisible(false);
            }}
        >
            <Space direction="vertical" size="large" style={{ width: "100%" }}>
                {/* 学生姓名 */}
                <Input
                    placeholder="请输入学生姓名"
                    onChange={(v) => setRealname(v.target.value)}
                />

                {/* 学号 */}
                <Input
                    placeholder="请输入学号"
                    onChange={(v) => setCode(v.target.value)}
                />

                {/* 密码 */}
                <Input
                    placeholder="请输入学生登录密码"
                    onChange={(v) => setPassword(v.target.value)}
                />

                {/* 班级选择 */}
                <Select
                    placeholder="请选择班级"
                    onChange={(v: string) => setGid(v)}
                    style={{ width: "100%" }}
                >
                    {gradeList.map((item: any) => {
                        return (
                            <Select.Option
                                key={item.grade_id}
                                value={item.grade_id}
                            >
                                {item.grade_name}
                            </Select.Option>
                        );
                    })}
                </Select>
            </Space>
        </Modal>
    );

    /**
     * 删除学生
     * @param item
     */
    const onDeleteClicked = (item: any) => {
        Modal.confirm({
            title: "操作警告",
            icon: <ExclamationCircleOutlined />,
            content: (
                <p>
                    你确定要删除{" "}
                    <span style={{ color: "orange", fontWeight: 900 }}>
                        {item.student_name}
                    </span>{" "}
                    同学吗？
                </p>
            ),
            okText: "确认",
            cancelText: "取消",
            onOk: async () => {
                const res = await removeItem(item.id);
                if (res.data.code !== 204) {
                    message.error(res.data.message);
                    return;
                }
                // 删除成功，提示成功，刷新列表
                message.success(res.data.message);
                getList();
            },
            onCancel() {
                console.log("取消操作");
            },
        });
    };

    return (
        <div className="student-manage">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">班级管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">学生管理</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            <Card>
                <Row>
                    <Button
                        type="primary"
                        onClick={() => setAddModalVisible(true)}
                    >
                        <PlusOutlined /> 添加学生
                    </Button>
                </Row>

                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(record: any) => record.student_id}
                />
            </Card>

            {/* 添加教室 */}
            {AddModal}
        </div>
    );
};

export default StudentManage;
